<template>
    <div class="condition">
        <div class="condition-toggle-top" @click="toggleHeight">
            <i class="iconfont icon-xiajiantou"></i>
        </div>
        <div class="condition-box" :style="{height: height+'px'}">
            <div class="condition-content" id="content" ref="conditionRef">
                <template v-for="item in fields">
                    <el-col :span="(item.col || 8)">
                        <div class="item">
                            <!--<m-condition-item :value="value[item.field_id]" :field="item" :is-reset="isReset" @m-change="handleChange"/>-->
                            <m-condition-item :value="value" :field="item" :is-reset="isReset" @m-change="handleChange"/>
                        </div>
                    </el-col>
                </template>
            </div>
        </div>
        <div class="condition-toggle-bot" @click="showMore" v-show="showRowNum" v-if="rowNum > 2">
            <i class="iconfont icon-shenglvehao"></i>
        </div>
    </div>
</template>

<script setup>
    import {ref,onMounted,nextTick,defineEmits,computed,defineProps,watch} from 'vue'

    //组件
    import MConditionItem from './ConditionItem'

    const emit = defineEmits(['resize','update:value','search']),
      props = defineProps({
        fields: {
          type: Object,
          default: {}
        },
        value: {
          type: Object,
          default: {}
        }
      });

    /*let fields = ref([
      {label: '条件一',type: 'text',field_id: 'field_a'},
      {label: '条件二',type: 'picklist',field_id: 'field_b',options: [{name: '选项1'},{name: '选项2'},{name: '选项3'}]},
      {label: '条件三',type: 'multiple',field_id: 'field_c',options: [{name: '选项A'},{name: '选项B'},{name: '选项C'}]},
      {label: '条件四',type: 'date',field_id: 'field_d',length: 'YYYY-MM-DD'},
      {label: '条件五',type: 'datetime',field_id: 'field_e',length: 'YYYY-MM-DD HH:mm'},
      {label: '条件五',type: 'datetime',field_id: 'field_e',length: 'YYYY-MM-DD HH:mm'},
      {label: '条件五',type: 'datetime',field_id: 'field_e',length: 'YYYY-MM-DD HH:mm'},
    ]),*/
    let // height = ref(0),
      rowNum = 0,
      rowH = 0,
      showRowNum = ref(0),
      isReset = ref(false),
      query = {};
    const conditionRef = ref(null);

    watch(() => props.value, (val) =>{
      // console.log('默认条件condition',val);
      query = val;
    },{immediate: true})

    let height = computed(()=>{
      return showRowNum.value * rowH + 1 //+1 border：1
    })

    function toggleHeight(){
      showRowNum.value = showRowNum.value ? 0 : rowNum > 2 ? 2 : rowNum;
      emitResize();
    }
    function showMore() {
      showRowNum.value = showRowNum.value <= 2 ? rowNum : 2;
      emitResize();
    }
    function emitResize(){
      setTimeout(()=>{emit('resize')},300)  //动画有0.3s
    }

    function handleChange(val) {
      let {field_id,type} = val.field;
      //日期时间范围
      if (typeof field_id === "object"){
        field_id.forEach((item, index) => {
          query[item] = val.value[index] || ''
        })
      }else if (typeof val.value === 'object'){
        query = {...query,...val.value}
      } else query[field_id] = val.value;
      emit('update:value',query);

      //230901 yan 修改字段变化返回结果中带有是否自动触发标识auto，auto=true则触发搜索
      if (val.auto){
        emit('search')
      }
      /*if (type === 'picklist'){
        //单选条件，触发搜索
        emit('search')
      }*/
      //  230901 end
    }
    //搜索
    function getQueryData(){
      return query;
    }
    //重置
    function reset(){
      // isReset.value = !isReset.value;
      // value
      emit('update:value',{});
      query = {};
    }

    onMounted(()=>{
      nextTick(()=>{
        let length = props.fields && props.fields.length;
        if (!length) return;
        let colNum = 0;
        props.fields.forEach(item => colNum += (item.col || 8));
        // rowNum = Math.ceil(length/3);   //一行显示3个条件，计算行数
        rowNum = Math.ceil(colNum/24);   //一行24，计算行数
        // height.value = (rowNum > 2 ? 2 : rowNum)*40 +3;
        let contentH = conditionRef.value.clientHeight; //高度
        rowH = contentH/rowNum;//每行高度
        showRowNum.value = rowNum > 2 ? 2 : rowNum;
        showRowNum.value && emitResize();
      })
    });

    defineExpose({query, reset})
</script>

<style scoped lang="less">
    .condition{
        position: relative;
        .condition-box{
            /*height: 0;*/
            overflow: hidden;
            transition: all 0.2s linear;
            position: relative;
            .condition-content{
                display: flex;
                flex-wrap: wrap;

                border-bottom: 1px solid #E6E6E6;
                border-left: 1px solid #E6E6E6;
                .item{
                    /*border: 1px solid #E6E6E6;*/
                    /*width: 33%;*/
                    /*flex-grow: 1;*/
                    border-top: 1px solid #E6E6E6;
                    border-right: 1px solid #E6E6E6;
                    box-sizing: border-box;
                }
            }
        }
        .condition-toggle-top,.condition-toggle-bot{
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            width: 32px;
            height: 13px;
            background: #999999;
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;
            & > i{
                color: #FFFFFF;
            }
            & > .icon-xiajiantou{
                font-size: 10px;
            }
            &:hover{
                background: @main-color;
            }
        }
        .condition-toggle-top{
            top: -13px;
        }
        .condition-toggle-bot{
            bottom: -13px;
        }
    }
</style>



